<template>
    <bi-input v-model="num" >
        <template #after>
            <bi-select   handle-type="button"  option-width="self"  handle-class="dropdown-toggle" v-model="unit">
                <bi-select-option value="px" label="px"></bi-select-option>
                
                <bi-select-option v-if="percent" value="%" label="%"></bi-select-option>
                <bi-select-option value="vw" label="vw"></bi-select-option>
                <bi-select-option value="vh" label="vh"></bi-select-option>
            </bi-select>
        </template>
    </bi-input>
</template>

<script>
import fieldMixin from  '@@/admin/assets/bi-plug/fieldMixin.js';
export default{
    mixins:[fieldMixin],
    computed:{
        num:{
            get(){
                //获取modelValue的数字部分，包涵负号小数点
                if (this.modelValue=='') return '';
                if (!isNaN(this.modelValue)) return this.modelValue;
                if (!this.modelValue.replace) return '';
                return this.modelValue.replace(/[^0-9.-]/g,'')??0;
            },
            set(val){

                //去掉不是数字的部分
                val = val.replace(/[^0-9.-]/g,'');
                let value = '';
                if (val!==''){
                    value = val+this.unit;
                }
              
                this.$emit('update:modelValue',value);
                this.$emit('change',value);
                this.valueChange(value);
            }
        },
        unit:{
            get(){
                if (this.modelValue=='') return 'px';
                if (isNaN(this.modelValue)) return 'px';
                if (!this.modelValue.replace) return 'px';
                if (!this.percent && this.modelValue.indexOf('%')!==-1){
                    return 'px';
                }
                
                let unit = this.modelValue.replace(/[0-9.-]/g,'');
                
                if (unit==''){
                    unit =  'px';
                }
                return unit;
            },
            set(val){
                let value = '';
                if ( this.num!==''){
                    value = this.num+val;
                }
            
                this.$emit('update:modelValue',value);
                this.$emit('change',value);
                this.valueChange(value);
            }
        }
    },
    props:{
        //百分比
        percent:{
            type:Boolean,
            default:true
        }
    }
}
</script>